<script setup>
import {onBeforeMount, onMounted, ref} from 'vue'
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import {queryForwarderInquiryDetail, updateForwarderInquiry} from "@/api/forwarderInquiry.js";
//路由实例
const router = useRouter();
const route = useRoute();
//日期
const value = ref();
//运输选项
const transportWay = ref([
  {
    value: "1",
    label: "海运"
  },
  {
    value: "2",
    label: "铁路"
  },
  {
    value: "3",
    label: "公路"
  },
  {
    value: "4",
    label: "空运"
  },
  {
    value: "5",
    label: "多联式"
  },
  {
    value: "6",
    label: "散货"
  },
]);
//报价条款
const quotationTerms = ref([
  {
    value: "1",
    label: "CFR"
  },
  {
    value: "2",
    label: "CIF"
  },
  {
    value: "3",
    label: "DDU"
  },
  {
    value: "4",
    label: "DAP"
  },
  {
    value: "5",
    label: "DDP"
  },
  {
    value: "6",
    label: "其他"
  }
])
//柜型选择
const cabinetType = ref([
  {
    value: "1",
    label: "拼箱"
  },
  {
    value: "2",
    label: "20GP"
  },
  {
    value: "3",
    label: "40GP"
  },
  {
    value: "4",
    label: "20HQ"
  },
  {
    value: "5",
    label: "40HQ"
  },
  {
    value: "6",
    label: "20FR"
  },
  {
    value: "7",
    label: "40FR"
  },
  {
    value: "8",
    label: "其他"
  },
])
//航线选择
const routed = ref([
  {
    value: "1",
    label: "中国-北美"
  },
  {
    value: "2",
    label: "中国-美加"
  },
  {
    value: "3",
    label: "中国-欧洲"
  },
  {
    value: "4",
    label: "中国-澳大利亚/新西兰"
  },
  {
    value: "5",
    label: "中国-中南美"
  },
  {
    value: "6",
    label: "中国-红海/地中海"
  },
  {
    value:"7",
    label:"中国-日本/韩国/俄罗斯"
  },
  {
    value:"8",
    label:"中国-东南亚"
  },
  {
    value:"9",
    label:"中国-中东/波斯港"
  },
  {
    value:"10",
    label:"中国-中东/印巴"
  },
  {
    value:"11",
    label:"中国-中东/印巴"
  },
  {
    value:"12",
    label:"中国-黑海/亚得里亚海"
  },
  {
    value:"13",
    label:"中国-南美东/南美西"
  },
  {
    value:"14",
    label:"中国-欧洲内陆"
  },
  {
    value:"15",
    label:"中国-东非"
  },
  {
    value:"16",
    label:"中国-西非"
  },
  {
    value:"17",
    label:"中国-北非"
  },
  {
    value:"18",
    label:"中国-南非"
  },
  {
    value:"19",
    label:"中国-加勒比海"
  },
  {
    value:"20",
    label:"中国-科隆"
  },
  {
    value:"21",
    label:"中国-香港/澳门"
  },

])
//表单引用 声明同名引用
const addForm = ref();
//询价表单对象
const forwarderInquiry = ref({
  customer_id: "",
  quote_coding: "",
  quotation:"",
  quote_data: "",
  type_goods: "",
  transport_way: "",
  route: "",
  port_of_departure: "",
  port_of_destination: "",
  quotation_terms: "",
  description_goods: "",
  hs_code: "",
  cabinet_type: "",
  destination: "",
  estimate_vaule: "",
  tariff_ratio: "",
  ocean_freight: "",
  customs_clearance: "",
  dispatch: "",
  status:"",
  //产品信息
  freightProducts:[
    {
      product_number: "",
      product_name: "",
      pieces: "",
      gross_weight:"",
      volume: "",
      support_number: "",
    }
  ]
});
//验证规则
const rules = {
  quote_coding: [{required: true, message: '请输入询价编码', trigger: 'blur'}]
}
//查询
async function select(quote_coding){
  console.log(quote_coding)
  let res = await queryForwarderInquiryDetail(quote_coding);
  if (res.code === 200) {
    forwarderInquiry.value = res.data;
  }
}
//取消
function close() {
  router.push("/forwarder/inquiry")
}

const tableData = ref([
  {
    product_number: "1",
    product_name: "hh",
    pieces: "",
    gross_weight:"",
    volume: "",
    support_number: "",
  }
])

//保存
async function save() {
  let valid = await addForm.value.validate(() => {})
  if (!valid) {
    return;
  }
  console.log(".>>", valid)
  console.log(forwarderInquiry.value)
  //保存
  let res = await updateForwarderInquiry(forwarderInquiry.value);
  if (res.code === 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    close();
  }
}
//生命周期
onBeforeMount(() => {
  let quote_coding = route.query.quote_coding;
  select(quote_coding);
})
</script>

<template>
  <div>
    <div class="tip">询价清单以及要求</div>
    <el-form :model="forwarderInquiry"
             :rules="rules"
             ref="addForm"
             label-width="auto"
             style="max-width: 1000px;
           margin: auto;
           background-color: white;
           padding: 20px;">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户ID:">
            <el-input v-model="forwarderInquiry.customer_id"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="询价编码:">

            <el-input v-model="forwarderInquiry.quote_coding"
                      placeholder="请输入" />

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="询价日期:">
            <el-date-picker v-model="value" placeholder="下拉选择日期" style="width: 500px;">

            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物种类:">
            <el-input v-model="forwarderInquiry.type_goods"
                      placeholder="单行输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="运输方式:">
            <el-select v-model="forwarderInquiry.transport_way" placeholder="请选择">
              <el-option v-for="item in transportWay"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="航线选择:">
            <el-select v-model="forwarderInquiry.route" placeholder="请选择">
              <el-option v-for="item in routed"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="起运港:">
            <el-input v-model="forwarderInquiry.port_of_departure"
                      placeholder="默认 上海"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的港:">
            <el-input v-model="forwarderInquiry.port_of_destination"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报价条款:">
            <el-select v-model="forwarderInquiry.quotation_terms" placeholder="CFR/CIF/DDU/DAP/DDP/其他">
              <el-option v-for="item in quotationTerms"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="货物描述:">
            <el-input v-model="forwarderInquiry.description_goods"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="HS编码:">
            <el-input v-model="forwarderInquiry.hs_code"
                      placeholder="默认 84749000"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="柜型选择:">
            <el-select v-model="forwarderInquiry.cabinet_type" placeholder="拼箱/20GP/40GP/20HQ/40HQ/20FR/40FR/其他">
              <el-option v-for="item in cabinetType"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tip">
      产品信息
    </div>
    <el-table :data="tableData" style="width: 1000px ;margin: auto;" stripe border>
      <el-table-column prop="product_number" label="产品编号" width="140" header-align="center"/>
      <el-table-column prop="product_name" label="产品名称" width="140" header-align="center"/>
      <el-table-column prop="pieces" label="总件数" width="180" header-align="center">
        <template v-slot="{row}">
          <el-input-number v-model="row.pieces"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="gross_weight" label="总毛重（kg）" width="180" header-align="center">
        <template v-slot="{row}">
          <el-input-number v-model="row.gross_weight"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="volume" label="总体积（CBM）" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.volume"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="support_number" label="总托数" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.support_number"></el-input-number>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin: 20px">
      <el-button type="primary" @click="save">修改</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<style scoped>
.tip {
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 1px;
  padding-left: 40px;
}
</style>

